<template>
    <div>
        <el-row>
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="账号">
                    <el-input v-model="formInline.username" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item label="昵称">
                    <el-input v-model="formInline.name" placeholder="请输入昵称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <el-row>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="username"
                        label="账号">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="昵称">
                </el-table-column>
                <el-table-column prop="headPic" label="头像">
                    <template slot-scope="scope">
                        <img :src="scope.row.headPic" alt="" width="100px" height="100px">
                    </template>
                </el-table-column>
                <el-table-column prop="sex" label="性别">
                    <template slot-scope="scope">{{ scope.row.sex ===`1` ?'男':'女'}}</template>
                </el-table-column>
                <el-table-column
                        prop="phoneNum"
                        label="手机号">
                </el-table-column>
                <el-table-column
                        prop="accountBalance"
                        label="账户余额">
                </el-table-column>
                <el-table-column
                        prop="integration"
                        label="积分">
                </el-table-column>
                <el-table-column
                        prop="growth"
                        label="成长值">
                </el-table-column>
                <el-table-column
                        prop="historyIntegration"
                        label="历史积分数量">
                </el-table-column>
                <el-table-column prop="memberLevelId" label="会员级别">
                    <template slot-scope="scope">
                        <span v-if="scope.row.memberLevelId === 1"><el-button size="mini"
                                                                              type="info">普通</el-button></span>
                        <span v-if="scope.row.memberLevelId === 2"><el-button size="mini" type="primary">金卡</el-button></span>
                        <span v-if="scope.row.memberLevelId === 3"><el-button size="mini" type="warning">白金</el-button></span>
                        <span v-if="scope.row.memberLevelId === 4"><el-button size="mini" type="success">钻石</el-button></span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址">
                </el-table-column>
                <el-table-column
                        prop="email"
                        label="邮箱">
                </el-table-column>
                <el-table-column prop="pathFront" label="正面证件照">
                    <template slot-scope="scope">
                        <img :src="scope.row.pathFront" alt="" width="100px" height="100px">
                    </template>
                </el-table-column>
                <el-table-column prop="pathReverse" label="反面证件照">
                    <template slot-scope="scope">
                        <img :src="scope.row.pathReverse" alt="" width="100px" height="100px">
                    </template>
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态">
                    <template slot-scope="scope">{{scope.row.status === 0 ? '正常':'禁用'}}</template>
                </el-table-column>


                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">禁用
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[2,3,5,10]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-row>
        <el-dialog title="会员管理" :visible.sync="dialogVisible" width="50%">
            <div>
                <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                    <el-input v-model="form.id" style="display: none"></el-input>
                    <el-form-item label="账号" prop="username">
                        <el-input v-model="form.username"></el-input>
                    </el-form-item>
                    <el-form-item label="昵称" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-radio-group v-model="form.sex">
                            <el-radio :label="`0`">女</el-radio>
                            <el-radio :label="`1`">男</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="证件类型">
                        <el-radio-group v-model="form.idType">
                            <el-radio :label="`1`">身份证</el-radio>
                            <el-radio :label="`2`">护照</el-radio>
                            <el-radio :label="`3`">军官证</el-radio>
                            <el-radio :label="`4`">台胞证</el-radio>
                            <el-radio :label="`5`">港澳台通行证</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="上传证件照正面" prop="pathFront">
                        <div>
                            <el-upload
                                    class="avatar-uploader"
                                    action="http://localhost:12188/ss/user/upload"
                                    :show-file-list="false"
                                    :headers="headers"
                                    :on-success="handleAvatarSuccessByFront"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="form.pathFront" :src="form.pathFront" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </el-form-item>
                    <el-form-item label="上传证件照反面" prop="pathReverse">
                        <div>
                            <el-upload
                                    class="avatar-uploader"
                                    action="http://localhost:12188/ss/user/upload"
                                    :show-file-list="false"
                                    :headers="headers"
                                    :on-success="handleAvatarSuccessByReverse"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="form.pathReverse" :src="form.pathReverse" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </el-form-item>
                    <el-form-item label="等级">
                        <el-select v-model="form.memberLevelId">
                            <el-option label="普通" :value="1" :key="1"/>
                            <el-option label="金卡" :value="2" :key="2"/>
                            <el-option label="白金" :value="3" :key="3"/>
                            <el-option label="钻石" :value="4" :key="4"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-radio-group v-model="form.status">
                            <el-radio :label="0">正常</el-radio>
                            <el-radio :label="1">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="手机号" prop="phoneNum">
                        <el-input v-model="form.phoneNum"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" prop="address">
                        <el-input v-model="form.address"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="form.email"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitPopForm('form')">确 定</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [],
                sex: '',
                level: '',
                status: '',
                currentPage: 1,
                total: 100,
                formInline: {username: ``, name: ``},
                pageSize: 5,
                dialogVisible: false,
                headers: {
                    myAuthorization: window.localStorage.getItem("token"),
                },
                form: {
                    id: 0,
                    username: "",
                    password: "",
                    pwSalt: "",
                    status: '0',
                    idType: "",
                    pathFront: "",
                    pathReverse: "",
                    name: "",
                    contactName: "",
                    contactPhone: "",
                    contactAddress: "",
                    licenseNo: "",
                    sex: "",
                    phoneNum: "",
                    address: "",
                    email: "",
                    memberLevelId: 0,
                    accountBalance: 0.00,
                    integration: 0.00,
                    growth: 0.00,
                    historyIntegration: "",
                    openId: "",
                    token: "",
                    headPic: ""
                },
                rules: {
                    username: [{required: true, message: '会员名称不能为空', trigger: 'blur'}],
                    phoneNum: [{required: true, message: '手机号不能为空', trigger: 'blur'}],
                    address: [{required: true, message: '地址不能为空', trigger: 'blur'}],
                    email: [{required: true, message: '邮箱不能为空', trigger: 'blur'}],

                }
            }
        },
        // 初始化数据  mounted()
        created: function () {
            this.loadData();
        },
        methods: {
            //封装数据请求
            loadData() {
                let _this = this;
                this.$http.post("/ms/member/queryAll?pageNo=" + this.currentPage + "&pageSize=" + this.pageSize + "", this.formInline)
                    .then((response) => {
                        let list = response.data.t.list;
                        _this.tableData = list
                        _this.total = response.data.t.total;
                        console.log(response.data.t.list);
                    })
            },
            //处理编辑
            handleEdit(index, row) {
                this.form={
                    id: 0,
                    username: "",
                    password: "",
                    pwSalt: "",
                    status: '0',
                    idType: "",
                    pathFront: "",
                    pathReverse: "",
                    name: "",
                    contactName: "",
                    contactPhone: "",
                    contactAddress: "",
                    licenseNo: "",
                    sex: "",
                    phoneNum: "",
                    address: "",
                    email: "",
                    memberLevelId: 0,
                    accountBalance: 0.00,
                    integration: 0.00,
                    growth: 0.00,
                    historyIntegration: "",
                    openId: "",
                    token: "",
                    headPic: ""
                }
                this.dialogVisible = true;
                this.form = JSON.parse(JSON.stringify(row))
            },
            //处理删除
            handleDelete(index, row) {
                let id = row.id;
                this.$http.delete('/ms/member/deleteById?memberId='+id+'').then((resp)=>{
                    console.log(resp.data);
                    if(Number(resp.data.resultCode===2000)){
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                    }else {
                        this.$message({
                            message: '操作失败',
                            type: 'error'
                        })
                    }
                    this.onSubmit();
                })
            },
            //分页 每页数量变化时处理
            handleSizeChange(val) {
                this.pageSize = val;
                this.currentPage = 1;
                this.loadData();
            },
            handleAvatarSuccessByFront(res, file) {
                this.form.pathFront = res.t;
                console.log("正面",this.form.pathFront)
            },
            handleAvatarSuccessByReverse(res, file) {
                this.form.pathReverse = res.t;
                console.log("反面",this.form.pathReverse)
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isGIF = file.type === 'image/gif';
                const isPNG = file.type === 'image/png';
                const isBMP = file.type === 'image/bmp';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG && !isGIF && !isPNG && !isBMP) {
                    this.common.errorTip('上传图片必须是JPG/GIF/PNG/BMP 格式!');
                }
                if (!isLt2M) {
                    this.common.errorTip('上传图片大小不能超过 2MB!');
                }
                return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
            },
            //分页 第几页变化时处理
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadData();
            },
            //点击查询方法
            onSubmit() {

                this.currentPage = 1;
                this.loadData();
                this.formInline.username = ''
                this.formInline.name = ''
            },
            //提交表单
            submitPopForm(form) {
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        if (Number(this.form.id !== 0)) {

                            this.$http.put("/ms/member/update", this.form).then((resp) => {
                                if (Number(resp.data.resultCode) === 2000) {
                                    this.$message({
                                        message: '修改成功',
                                        type: 'success'
                                    })
                                    this.currentPage = 1;
                                    this.loadData();
                                }
                                if (Number(resp.data.resultCode) === 5000) {
                                    this.$message({
                                        message: '有重复角色名',
                                        type: 'error'
                                    })
                                }
                            })
                        }
                        this.dialogVisible = false;
                    }
                })

            },

        }
    }
</script>

<style scoped>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>